<template>
  <div class="dashboard-wrapper">

    <div class="ServiceStates__modules">
      <div class="full-box">
        <empty_car_list></empty_car_list>
      </div>
      <div class="full-box2">
        <revenue_list></revenue_list>
      </div>
      <div class="full-box3">
        <accounts_receivable></accounts_receivable>
      </div>
    </div>
    <div class="ServiceStates__modules">
      <div class="full-box4">
        <dynamic_list_24h></dynamic_list_24h>
      </div>

    </div>
    <div class="ServiceStates__modules">
      <div class="full-box4">
        <dynamic_list_30d></dynamic_list_30d>
      </div>

    </div>



  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import empty_car_list from './empty_car_list.vue'
import revenue_list from './revenue_list.vue'
import accounts_receivable from './accounts_receivable.vue'
import dynamic_list_24h from './24h_dynamic_list.vue'
import dynamic_list_30d from './30d_dynamic_list.vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
onMounted(() => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载，中请稍后...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let timer = null
  clearTimeout(timer)
  setTimeout(() => {
    loading.close()
  }, 2000);
})

</script>

<style scoped lang='scss'>
.dashboard-wrapper {

  width: 100%;
  height: 88vh;
  overflow: auto;
 
  background: #f0f2f3;

  .ServiceStates__modules {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;

    .full-box {
      width: 29%;
      padding: 8px;
      background: #fff;
      overflow: auto;
      border-radius: 4px;

    }

    .full-box2 {
      width: 32%;
      padding: 8px;
      background: #fff;
      border-radius: 4px;

    }

    .full-box3 {
      width: 36%;
      padding: 8px;
      background: #fff;
      border-radius: 4px;

    }

    .full-box4 {
      width: 100%;
      padding: 8px;
      background: #fff;
      overflow: auto;
      border-radius: 4px;

    }

    .card-box {
      width: 49.7%;
      padding: 16px;
      background: white;
      border-radius: 4px;

      &.card-box-custom {
        display: flex;

        .card-box_inner {
          position: relative;
          flex: 1;
          background: white;
          padding: 16px;

          &.card-box_inner_flex_half {
            flex: 1.3;
          }

          .card-box-position {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            height: 1072px;
            margin-bottom: 20px;
          }
        }

        .card-line {
          width: 12px;
          height: 100%;
        }
      }
    }


    .box-three-wrapper {
      flex: 3;
      display: flex;
      padding: 16px;
      justify-content: space-between;
      margin-bottom: 10px;

      .card-box {
        width: 32.8%;
      }
    }

    .box-one-wrapper {
      flex: 1;
    }

    .half-box {
      width: 24.6%;
    }

    .marginLeftAndRight_10 {
      margin: 0 10px;
    }

    .marginLeft_5 {
      margin-left: 5px;
    }

    .marginRight_5 {
      margin-right: 5px;
    }

    .marginLeft_10 {
      margin-left: 10px;
    }

    .marginRight_10 {
      margin-right: 10px;
    }

    .ServiceStates__item {
      flex: 1;

      &.half {
        flex: 0.6
      }

      &.flex_falf {
        flex: 1.5
      }

      &.setwidth_500 {
        width: 500px;
        flex: none;

        .el-card__body {
          width: 500px;
        }
      }

      &.setwidth_200 {
        width: 360px;
        flex: none;

        .el-card__body {
          width: 400px;
        }
      }

      .tableHeader {
        border: 1px solid #ebeef5;
        font-size: 14px;
        border-bottom: none;
        padding: 8px 0;
        text-align: center;
      }

      .time-wrapper {
        text-align: right;
      }

      .table-style {
        margin: 10px 0;
      }

      .orderSearch-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: #3A71A8;
          font-size: 18px;
          padding-left: 10px;
          font-weight: bold;
        }
      }


      &.margin {
        margin: 0 10px;
      }


      .echarts-wrapper {
        display: flex;
        justify-content: space-between;

        .half_Box {
          flex: 1;
          box-sizing: content-box;
          height: 300px;

          .el-card__body {
            height: 100%;
          }
        }
      }


    }
  }
}
</style>
